<script setup>
import { handlePaste } from '../utils/index.js'
const emit = defineEmits()

// 自定义输入框dom 绑定ref
const messageInputDom = ref()

// 选择的emoji
const selectEmoji = (index) => {
    const dom = messageInputDom.value;
    dom.focus()
    let emojiImg = `<img class="emoji-img" src="/gif/${index}.gif" width="25" height="25" style="vertical-align: middle;">`
    document.execCommand('insertHTML', false, emojiImg)
}

const getContent = () => {
    // console.log(messageInputDom.value.innerHTML)
    emit('getContent', messageInputDom.value.innerHTML)
}

onMounted(() => {
    // document.addEventListener("mousedown", handleClickOutside(()=>state.showEmo = false));
})



</script>

<template>
    <div class="relative">
        <div ref="messageInputDom" @paste="handlePaste" @click="handleClick" contenteditable="true" spellcheck="false"
            tabindex="0" class="h-[200px] p-1"
            style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;border:1px solid #e4e7eb">
        </div>
        <el-popover placement="top-end" trigger="click" width="400">
            <template #reference>
                <div class="icon-box absolute ml-1 -mt-7 w-[26px] h-[26px] click">
                    <!-- <img src="/svg/emoji.svg" alt=""> -->
                    <svg t="1690621072710" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="30103" width="25" height="25">
                        <path
                            d="M515.328 965.2224c-249.9072 0-453.2224-203.3152-453.2224-453.2224s203.3152-453.2224 453.2224-453.2224 453.2224 203.3152 453.2224 453.2224-203.3152 453.2224-453.2224 453.2224z m0-845.0048c-216.0128 0-391.7824 175.7696-391.7824 391.7824s175.7696 391.7824 391.7824 391.7824 391.7824-175.7696 391.7824-391.7824-175.7696-391.7824-391.7824-391.7824z"
                            fill="#4f4f4f" p-id="30105"></path>
                        <path
                            d="M385.8944 409.4976m-53.6064 0a53.6064 53.6064 0 1 0 107.2128 0 53.6064 53.6064 0 1 0-107.2128 0Z"
                            fill="#4f4f4f" p-id="30106"></path>
                        <path
                            d="M636.8768 409.4976m-53.6064 0a53.6064 53.6064 0 1 0 107.2128 0 53.6064 53.6064 0 1 0-107.2128 0Z"
                            fill="#4f4f4f" p-id="30107"></path>
                        <path
                            d="M510.208 708.1984c-122.88 0-183.7568-103.1168-186.3168-107.52a30.72 30.72 0 0 1 53.1456-30.8224c1.9968 3.3792 46.4896 76.9024 133.1712 76.9024 86.784 0 131.328-73.7792 133.1712-76.9024a30.78144 30.78144 0 0 1 41.984-11.008 30.6688 30.6688 0 0 1 11.1616 41.8304c-2.56 4.352-63.488 107.52-186.3168 107.52z"
                            fill="#4f4f4f" p-id="30108"></path>
                    </svg>
                </div>
            </template>
            <Emoji @selectEmoji="selectEmoji" />
        </el-popover>
        <el-button class="absolute right-1 bottom-1" type="warning" color="#1772f6" @click="getContent">发布</el-button>
    </div>
</template>